<script lang="ts">
import { commentCountByDateLastMonth, novelCountByDateLastMonth, userCountByDateLastMonth, type CountByDate } from '@/api/stats/stats';
import { ElMessage } from 'element-plus';
import { Component, Hook, Inject, Vue } from 'vue-facing-decorator';
import { use as echartsUse } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import AdminNav from '../component/AdminNav.vue';
import { computed } from 'vue';

echartsUse([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

@Component({
  components: {
    AdminNav,
    VChart,
  },
})
export default class AdminStatsPage extends Vue {
  @Inject() theme!: 'light' | 'dark';

  commentData: CountByDate[] | null = null;
  novelData: CountByDate[] | null = null;
  userData: CountByDate[] | null = null;

  async initCommentData() {
    const resp = await commentCountByDateLastMonth();
    if (resp.error != null) {
      ElMessage({ type: 'error', message: resp.error });
      return;
    }
    this.commentData = resp.data;
  }
  async initNovelData() {
    const resp = await novelCountByDateLastMonth();
    if (resp.error != null) {
      ElMessage({ type: 'error', message: resp.error });
      return;
    }
    this.novelData = resp.data;
  }
  async initUserData() {
    const resp = await userCountByDateLastMonth();
    if (resp.error != null) {
      ElMessage({ type: 'error', message: resp.error });
      return;
    }
    this.userData = resp.data;
  }

  formatOptions(data: CountByDate[] | null, name: string) {
    if (!data) return null;
    const labels = data.map(item => item.date.split("T")[0]); // Format date
    const values = data.map(item => item.count);

    const options = {
      title: { text: '近一个月新增' + name + '数量', left: 'center', y: { formatter: (val: number) => val.toFixed(0) } },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: labels, axisLabel: { rotate: 45 } },
      yAxis: { type: 'value', labels: { formatter: (val: number) =>val.toFixed(0) } } ,
      series: [{ name, type: 'bar', data: values }],
      backgroundColor: this.theme === 'dark' ? '#1d1f1e' : '#ffffff',
      darkMode: this.theme === 'dark',
    };
    return options;
  }

  get commentOptions() {
    return this.formatOptions(this.commentData, '评论');
  }
  get novelOptions() {
    return this.formatOptions(this.novelData, '小说');
  }
  get userOptions() {
    return this.formatOptions(this.userData, '用户');
  }

  @Hook
  provide() {
    return {
      [THEME_KEY]: computed(() => this.theme),
    };
  }

  mounted() {
    this.initCommentData();
    this.initNovelData();
    this.initUserData();
  }
}
</script>
<template>
  <admin-nav />
  <div class="admin-stats-page" :key="theme">
    <template v-if="novelData">
      <h2>小说统计</h2>
      <v-chart class="chart novel-chart" :option="novelOptions" />
    </template>
    <template v-if="commentData">
      <h2>评论统计</h2>
      <v-chart class="chart comment-chart" :option="commentOptions" />
    </template>
    <template v-if="userData">
      <h2>用户统计</h2>
      <v-chart class="chart user-chart" :option="userOptions" />
    </template>
  </div>
</template>
<style scoped>
.admin-stats-page {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-primary);
  display: flow-root;
}

.chart {
  height: 600px;
  max-height: 60vw;
  min-height: 100px;
}
</style>
